<template>
    <div class="page-link">
        <link-search></link-search>
        <div class="topbar" @click="onNew">
            <span class="label">新朋友</span>
            <span class="dot" v-if="dot.length">{{dot.length}}</span>
        </div>
        <div class="title">我的好友</div>
        <link-list :linkList="linkList"></link-list>
    </div>
</template>

<script>
import LinkSearch from '../components/Search/Index'
import LinkList from '../components/Link/Index'
export default {
    name: 'PageLink',
    components: {
        LinkSearch,
        LinkList
    },
    methods: {
        onNew() {
            this.$router.push('/new')
        }
    },
    computed: {
        linkList() {
            return this.$store.state.linkList
        },
        dot() {
            return this.$store.state.newList
        }
    },
}
</script>

<style lang="scss" scoped>
@import '../assets/scss/theme.scss';
.page-link{
    width:100vw;
    height:100vh;
    overflow: auto;
    padding:3.5rem 0 3.375rem 0;
    @include background_color("background_color3");
    .topbar{
        margin:0.5rem 0;
        padding:12px 10px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        @include background_color("background_color5");
        .label{
            @include font_color("font_color2");
        }
        .dot{
            font-size:0.3125rem;
            padding:0.125rem 0.3125rem;
            border-radius:10px;
            background:#F74C32;
            color:#fff;
        }
    }
    .title{
        @include background_color('background_color5');
        padding:8px 10px 8px 10px;
        font-size:1rem;
        font-weight:600;
        @include font_color("font_color1");
    }
}
</style>